import { useStoreWorkbench } from '@/store/workbench';
import { permissionOption } from '@/utils/constant';
import { Col, Form, Input, Modal, Row, Select } from 'antd';
import { useEffect, useState } from 'react';

interface Iprops {
  visibleModal: boolean;
  onGenerate: (values: any) => void;
}

const AddModal: React.FC<Iprops> = ({ visibleModal, onGenerate }) => {
  // const { visible, onClose, onGenerate } = prosp;
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const { userDataList } = useStoreWorkbench();

  useEffect(() => {
    if (visibleModal) {
      setVisible(true);
      form.resetFields();
    }
  }, [visibleModal]);

  const onClose = () => {
    setVisible(false);
    form.resetFields();
  };

  const handleOk = () => {
    form
      .validateFields()
      .then((values) => {
        setConfirmLoading(true);
        onGenerate(values);
        onClose();
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });
  };

  return (
    <Modal
      title="新建项目"
      open={visible}
      onOk={handleOk}
      onCancel={onClose}
      confirmLoading={confirmLoading}
      okText="保存"
    >
      <Form
        style={{ marginTop: 40 }}
        form={form}
        labelCol={{
          span: 6,
        }}
      >
        <Row>
          <Col span={24}>
            <Form.Item
              label="项目名称"
              name="name"
              rules={[{ required: true, message: '不得为空' }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="项目简介"
              name="description"
              rules={[{ required: false, message: '不得为空' }]}
            >
              <Input.TextArea rows={3} placeholder="请输入" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="项目负责人"
              name="ownerId"
              rules={[{ required: true, message: '不得为空' }]}
            >
              <Input placeholder="请输入" />
              {/* <Select placeholder="请选择" options={userDataList} /> */}
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="项目成员"
              name="ownerId"
              rules={[{ required: true, message: '不得为空' }]}
            >
              <Select
                mode="multiple"
                placeholder="请选择"
                options={userDataList}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="项目权限"
              name="permission"
              rules={[{ required: true, message: '不得为空' }]}
            >
              <Select placeholder="请选择" options={permissionOption} />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="项目Git ID"
              name="giteeProjectId"
              rules={[{ required: true, message: '不得为空' }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="Git 地址"
              name="gitSshUrl"
              rules={[{ required: true, message: '不得为空' }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Form.Item
              label="飞书目录"
              name="feishuUrl"
              rules={[{ required: false, message: '不得为空' }]}
            >
              <Input placeholder="请输入" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};

export default AddModal;
